import React, { useEffect } from 'react'
import styled from 'styled-components'
import Navbar from './Navbar'
import Analytics from './Analytics'
import FAQ from './FAQ'
import Earnings from './Earnings'
import Transfers from './Transfers'
import Profile from './Profile'
import scrollreveal from 'scrollreveal'

// 仪表盘组件
export default function Dashborad() {
  useEffect(() => {
    const sr = scrollreveal({
      origin: 'bottom', // 从下向上动画
      distance: '80px',
      duration: 2000,
      reset: false,
    })
    sr.reveal(
      `
        nav,
        .row__one,
        .row__two
    `,
      {
        opacity: 0,
        interval: 100,
      }
    )
  }, [])
  return (
    <Section>
      {/* 导航栏 */}
      <Navbar />
      <div className='grid'>
        <div className='row__one'>
          {/* 数据分析 */}
          <Analytics />
          {/* 常见问题 */}
          <FAQ />
        </div>
        <div className='row__two'>
          {/* 收入情况 */}
          <Earnings />
          {/* 资金记录 */}
          <Transfers />
          {/* 个人信息详情 */}
          <Profile />
        </div>
      </div>
    </Section>
  )
}

const Section = styled.section`
  /* 因为左侧设置了固定定位，所以这里要给margin-top来偏移一定位置 */
  height: 100%;
  margin-left: 18vw;
  padding: 2rem;

  .grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
    margin-top: 2rem;
    .row__one {
      /* 开启网格布局 */
      display: grid;
      /* repeat可以将重复的值进行简化 repeat(2, 1fr) 代表一行两块 并且宽度均分*/
      grid-template-columns: repeat(2, 1fr);
      height: 50%;
      gap: 1rem;
    }
    .row__two {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      height: 50%;
      gap: 1rem;
    }
  }

  /* 注意媒体查询的 and符之间需要使用空格分隔 否则不起效果 */
  @media screen and (min-width: 280px) and (max-width: 1080px) {
    margin-left: 0;
    .grid {
      .row__one,
      .row__two {
        grid-template-columns: 1fr;
      }
    }
  }
`
